<template>
	<view class="list">
		<scroll-view scroll-y :scroll-top="scrollTop" @scrolltolower="lower" lower-threshold="100"
			class="scroll-container">
			<view v-for="(item,index) in list" :key="item" class="item">{{item}}</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onReady
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	const top = ref(0);
	const list = ref(["a", "b", "c", "d", "e", "f", "j", "h"]);
	const lower = () => {
		let item = list.value.shift();
		console.log(list.value)
		list.value.push(item);
	}
	const scrollTop = ref(0);

	if (list.value.length > 4) {
		setInterval(() => {
			scrollTop.value += 100;
		}, 1000)
	}
</script>

<style scoped lang="scss">
	.list {
		width: 100vw;
		height: 300px;
		border: 1px solid red;
		box-sizing: border-box;

		.scroll-container {
			width: calc(100vw + 20rpx);
			height: 300px;


			.item {
				width: 100vw;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
</style>